<!-- 评论区组件 -->
<template>
	<view class="cmt_list">
		<view class="cmt_item" v-for="(items, index) in comment" :key="index">
			<view class="cmt_head">
				<!-- 用户头像 -->
				<a class="userphoto" @click="gotoUserInfo(`/pages/UserInfo?id=${items.user.userId}`,items.user.nickname)">
					<image :src="items.user.avatarUrl" alt="" />
					<span class="ava-icon ava-icon-daren" v-if="items.user.avatarDetail && items.user.avatarDetail.identityLevel >= 3"></span>
				</a>
			</view>
			<view class="cmt_wrap f-bd f-bd-btm">
				<view class="cmt_header">
					<view class="cmt_meta">
						<span class="cmt_user">
							<!-- 用户名字 -->
							<a @click="gotoUserInfo(`/pages/UserInfo?id=${items.user.userId}`,items.user.nickname)">{{ items.user.nickname }}</a>
							<image v-if="items.user.vipRights && items.user.vipRights.associator" style="margin: 0 4px;width: 25px;height: 13px;" :src="items.user.vipRights.associator.iconUrl" alt="" />
							<image
								v-if="items.user.vipRights && !items.user.vipRights.associator && items.user.vipRights.musicPackage"
								style="margin: 0 4px;;width: 11px;height: 11px;"
								:src="items.user.vipRights.musicPackage.iconUrl"
								alt=""
							/>
						</span>
						<view class="cmt_time">{{ dateStr(items.timeStr) }}</view>
					</view>
					<view class="cmt_like">
						<span class="cmt_likearea">
							<span v-if="items.likedCount">{{ num(items.likedCount) }}</span>
							<i class="cmt_likeicn">
								<u-icon name="thumb-up" />
							</i>
						</span>
					</view>
				</view>
				<view class="cmt_content">
					<span class="cmt_text">
						<span v-if="items.beReplied[0]">
							回复
							<span style="color: #507daf" @click="gotoUserInfo(`/pages/UserInfo?id=${items.beReplied[0].user.userId}`,items.beReplied[0].user.nickname)">@{{ items.beReplied[0].user.nickname }}</span>
							：
						</span>
						{{ items.content }}
					</span>
				</view>
				<template v-if="items.beReplied[0]">
					<view class="cmt_replied f-bd f-bd-full" v-if="items.beReplied[0].content">
						<span>@{{ items.beReplied[0].user.nickname }}：</span>
						<span class="cmt_replied_cnt">
							<span class="cmt_text">{{ items.beReplied[0].content }}</span>
						</span>
					</view>
					<view class="cmt_replied f-bd f-bd-full" v-else>
						<span>该评论已删除</span>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import { numberFormat, ConversionTime } from '@/utils/common';
export default {
	props: {
		comment: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		//日期格式化
		dateStr() {
			return (str) => {
				return ConversionTime(str);
			};
		},
		//数字格式化
		num() {
			return (val) => {
				return numberFormat(val);
			};
		}
	},
	methods:{
		// 用户名字 帐号已注销 不让点击查看信息
		gotoUserInfo(url,name) {
			if(name ==='帐号已注销'){
				return
			} else {				
				uni.navigateTo({ url })
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.cmt_list {
	.cmt_item {
		padding-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		.cmt_head {
			height: 35px;
			margin: 0 10px;
			flex: none;
			.userphoto {
				position: relative;
				display: block;
				color: #507daf;
				text-decoration: none;
				> image {
					display: block;
					border-radius: 50%;
					width: 30px;
					height: 30px;
				}
			}
			> a .ava-icon {
				position: absolute;
				right: -5px;
				bottom: 0;
				width: 12px;
				height: 12px;
				background-image: url('https://p4.music.126.net/l0FkWHfIqLav4I1oYHIyVQ==/19013854579518977.jpg');
				background-repeat: no-repeat;
				background-size: 75px auto;
			}
			> a .ava-icon.ava-icon-daren {
				background-position: -40px 0;
			}
		}
		.cmt_head + .cmt_wrap {
			padding-left: 0;
		}
		.cmt_wrap {
			padding-right: 10px;
			padding-bottom: 11px;
			flex: auto;
			width: 0;
			.cmt_header {
				display: flex;
				flex-direction: row;
			}
			.cmt_content {
				color: #333;
				font-size: 15px;
				line-height: 22px;
				margin-top: 5px;
				.cmt_text {
					vertical-align: middle;
				}
			}
			.cmt_meta {
				flex: auto;
				width: 0;
				// font-size: 0;
				.cmt_user {
					max-width: 100%;
					display: inline-flex;
					align-items: center;
					> a {
						font-size: 14px;
						color: #666;
						line-height: 20px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						flex: auto;
						text-decoration: none;
					}
				}
				.cmt_time {
					font-size: 9px;
					color: #999;
				}
			}
			.cmt_like {
				width: 65px;
				height: 22px;
				line-height: 22px;
				font-size: 11px;
				color: #999;
				flex: none;
				text-align: right;
				.cmt_likearea {
					display: inline-block;
					min-width: 30px;
					padding-left: 5px;
					> span {
						vertical-align: middle;
					}
					.cmt_likeicn {
						display: inline-block;
						width: 14px;
						height: 22px;
						font-size: 18px;
						margin-left: 6px;
						line-height: 0;
						vertical-align: middle;
						cursor: pointer;
					}
				}
			}
			.cmt_replied {
				margin: 5px 0;
				padding: 10px;
				color: #888;
				font-size: 14px;
				line-height: 21px;
				span:first-child {
					vertical-align: middle;
					color: #888;
					font-size: 14px;
					line-height: 21px;
				}
				.cmt_replied_cnt {
					.cmt_text {
						vertical-align: middle;
					}
				}
			}
		}
		.f-bd-btm {
			border-bottom: 1px solid rgb(226, 226, 227);
		}
	}
}
.f-bd {
	position: relative;
	&:after {
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		position: absolute;
		z-index: 2;
		content: '';
		top: 0;
		left: 0;
		pointer-events: none;
		box-sizing: border-box;
		transform-origin: top left;
		border: 0 solid rgba(0, 0, 0, 0.1);
	}
}
.f-bd-full:after {
	border-width: 1px;
}
</style>
